* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
.aaaa {
  background: url('../imges/21cfed129e4d4a0b9fe8ebe9b036b56b.jpg');
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
  background-repeat: no-repeat;
}
.aaaa .card {
  width: 450px;
  position: absolute;
  top: 50%;
  height: 600px;
  left: 50%;
  background: url('../imges/4509939773a58a76525d212196600e0a.jpeg');
  transform: translate(-50%, -50%);
  overflow: hidden;
  box-shadow: 0px 0px 20px #2b38e9;
}
.aaaa .card .card-head {
  height: 450px;
  overflow: hidden;
}
.aaaa .card .card-head .AA {
  position: absolute;
  top: 0;
  left: 130px;
  color: #f1f1f1;
  font-size: 36px;
}
.aaaa .card .card-head img {
  height: 100%;
  width: 100%;
}
.aaaa .card .card-head .menu {
  position: absolute;
  top: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  color: wheat;
  opacity: 0.7;
  font-size: 32px;
}
.aaaa .card .card-head .menu img {
  width: 32px;
  cursor: pointer;
}
.aaaa .card .card-head .name {
  position: absolute;
  bottom: 80px;
  left: 20px;
  color: #f1f1f1;
}
.aaaa .card .card-head .name span {
  margin-top: 10px;
}
.aaaa .card .card-head .name .hi {
  margin: 10px 0 0 10px;
}
.aaaa .card .card-head .name .hi img {
  width: 120px;
  height: 120px;
}
.aaaa .card .card-head .name .last {
  display: block;
  font-size: 24px;
}
.aaaa .card .card-head .name .first {
  font-size: 24px;
  display: block;
}
.aaaa .card .card-head .name .t {
  font-size: 24px;
  display: block;
}
.aaaa .card .card-head .name .f {
  font-size: 24px;
  display: block;
}
.aaaa .card .card-head .name .ff {
  font-size: 24px;
  display: block;
}
